<template>
  <ElTabs v-model="activeName" v-bind="widget.elProps">
    <ElTabPane v-for="subWidget in widget.widgetList" :key="subWidget.name" :label="subWidget.label" :name="subWidget.id">
      <RenderWidget :designer="designer" :widget="subWidget" :form-model="formModel"></RenderWidget>
    </ElTabPane>
  </ElTabs>
</template>
<script setup lang="ts" name="TabsWidget">
import { ref } from "vue";
import { ElTabs, ElTabPane } from "element-plus";
import RenderWidget from "../../Layout/RenderWidget.vue";
const props = defineProps({
  designer: {
    type: Object
  },
  widget: {
    type: Object
  },
  formModel: {
    type: Object
  }
});
const activeName = ref();
if (props.widget!.widgetList.length > 0) {
  activeName.value = props.widget!.widgetList[0].id;
}
</script>
<style lang="scss" scoped></style>
